<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .center-block {
        display: block !important;
        margin-right: auto !important;
        margin-left: auto !important;
      }
    </style>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-140461850-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-140461850-1');
  </script>

  <link rel="stylesheet"  href="./static/style.css">


  <style>
    .whole_bg {
      background-image: url(https://s2.ax1x.com/2020/01/16/lvIyFJ.gif) !important;
    }
  </style>

  <!--
  Note: This is a good css too worth looking at in the future : https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-nord.min.css
  -->
  
  
  
  <meta charset="UTF-8">
  <title>ID Photo Auto Generator</title>
</head>


<div class="common"></div>

<body class="whole_bg" background="https://s2.ax1x.com/2020/01/16/lvIyFJ.gif">

  <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


  <header class="sticky row">
    <div align="center" style="background:#000; color:#FFF">
    <br>
    <a href="#" class="logo" style="color: #FFF; text-decoration: none;">ID Photo Online Convertor</a>  &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp
    <a href="https://github.com/YuchaoZheng/Google_camp" class="logo" style="color: #FFF; text-decoration: none;">code</a>
    <br>
    <br>
    </div>
  </header>
  <div class="row">
    <div class="col-sm-12 col-md-10 col-md-offset-1">
      <br/>
      <h1 align="center">ID Photo Auto Conversion</h1>
      <h1 align="right"><small>deployed by team '三个顶俩' &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</small></h1>
      <br><br>
      <h3 align="center">
      Please upload your selfie on the box below.
      </h3>
     </br>
    </div>
  </div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//d3js.org/d3.v5.min.js"></script>

<div class='boxitem'>
    <div class="whole_bg" id="test-image-preview" style="border: 3px solid #ccc; width: 30%; height: 400px; float:left; display:flex; vertical-align: middle;justify-content: center;align-items: center;">
    </div>
    <div class="whole_bg" id="result_image" style="border: 3px solid #ccc; width: 30%; height: 400px; display: flex; vertical-align: middle;justify-content: center;align-items: center;">
    </div>
</div>

<div class="center-block" style="width:15%" align="center">
    <input type="file" id="test-image-file" name="test">
</div>

<div class="center-block" style="width:40%">
    <label for="points" class="hint">whitening</label>
    <input type='range' id='param1' name='input1' min="0" max="1" value="0" step="0.01">
</div>

<div class="center-block" style="width:40%">
    <label for="points" class="hint"> lip brightening</label>
    <input type='range' id='param2' name='input2' min="0" max="1" value="0" step="0.01">
</div>

<div class="center-block" style="width:40%">
    <label for="points" class="hint">face thining</label>
    <input type='range' id='param3' name='input3' min="0" max="1" value="0" step="0.01">
</div>

<div class="center-block" style="width:40%">
    <label for="points" class="hint">smoothing</label>
    <input type='range' id='param4' name='input4' min="0" max="1" value="0" step="0.01">
</div>

<div class="center-block" style="width:15%">
  <button type="button" onclick="Upload_params()">Confirm</button>
</div>

<script>
var fileInput = document.getElementById('test-image-file');
var preview = document.getElementById('test-image-preview');
var result = document.getElementById('result_image');
preview.flag = '0';

var image = '';


// 监听change事件:
fileInput.addEventListener('change', function () {
    // 检查文件是否选择:
    if (!fileInput.value) {
        return;
    }
    // 获取File引用:
    var file = fileInput.files[0];
    // 获取File信息:
    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
        alert('Invalid image file.');
        return;
    }

    preview.flag = '1';

    // 读取文件:
    var reader = new FileReader();
    reader.onload = function(e) {
        preview.innerHTML = '<img src="' + e.target.result + '" height=400>';
    };
    // 以DataURL的形式读取文件:
    reader.readAsDataURL(file);
    
    function img_to_backend(){
        var formData = new FormData();
        formData.append("img", fileInput.files[0]);
        
        $.ajax({
            url: '/initialize',
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
            success: function (msg) {
                alert(msg);
            }
            
        }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
            //alert("error");
        });
    }
});

function Upload_params(){
    var param1 = document.getElementById("param1").value;
    var param2 = document.getElementById("param2").value;
    var param3 = document.getElementById("param3").value;
    var param4 = document.getElementById("param4").value;
    
    if ((param1 < 0) || (param1 > 1)){
        alert("Whitening degree should be in range [0, 1]");
        return;
    }

    if ((param2 < 0) || (param2 > 1)){
        alert("lip brightening degree should be in range [0, 1]");
        return;
    }

    if ((param3 < 0) || (param3 > 1)){
        alert("face thining degree should be in range [0, 1]");
        return;
    }

    if ((param4 < 0) || (param4 > 1)){
        alert("smoothing degree should be in range [0, 1]");
        return;
    }

    if (preview.flag == '0'){
        alert("Please provide your image first.");
        return;
    }


    function send_to_backend(param1, param2, param3, param4){
        var formdata = new FormData();
        var sharpen_val = 0.35
        formdata.append("image", fileInput.files[0]);
        formdata.append("whighten", param1);
        formdata.append("lip_brighten", param2);
        formdata.append("thin", param3);
        formdata.append("smooth", param4);
        formdata.append("sharpen", sharpen_val);


        $.ajax({
            url: '/predict',
            type: 'POST',
            data: formdata,
            mimeType: "multipart/form-data",
            processData: false,
            contentType: false,
            
        }).done(function (data){
            var image_src = "data:image/png;base64," + data;
            result.innerHTML = '<img src="' + image_src + '" height=400 />\n';
        }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
            //alert("error");
        });
    }

    send_to_backend(param1, param2, param3, param4);
}

</script>


<style>
.boxitem {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.image{
    vertical-align: middle;
}

.logo {
    font-size: 30px;
}

.hint {
    font-size: 20px !important;
}
</style>

<style type="text/css">
  a:link {text-decoration:none; color: #FFF;}
  a:visited {text-decoration:none; color: #FFF;}
  a:hover {text-decoration:none; color: #FFF;}
  a:active {text-decoration:none; color: #FFF;}
</style>




</body>
</html>